:root {
  // 主题色
  --color-primary: #518aff;
  --color-primary-rgb: 81, 138, 255;
  --color-success: #5ad8a6;
  --color-warning: #ffad08;
  --color-danger: #ff5858;
  --color-info: #909399;

  // 文字颜色
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #c0c4cc;
  --text-disabled: #c0c4cc;

  // 边框颜色
  --border-base: #dcdfe6;
  --border-light: #e4e7ed;
  --border-lighter: #ebeef5;
  --border-extra-light: #f2f6fc;

  // 背景色
  --bg-base: #ffffff;
  --bg-light: #f2f3f5;
  --bg-hover: #f5f7fa;
  --bg-disabled: #f5f7fa;

  // 字体
  --font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'SF Pro SC', 'SF Pro Text',
    'Helvetica Neue', Arial, sans-serif;

  // 字号
  --font-size-h1: 32px; // 大标题
  --font-size-h2: 24px; // 主标题
  --font-size-h3: 20px; // 次标题
  --font-size-h4: 18px; // 小标题
  --font-size-body: 16px; // 正文
  --font-size-small: 12px; // 辅助文字

  // 圆角
  --radius-base: 4px;
  --radius-medium: 6px;
  --radius-large: 8px;
  --radius-round: 20px;

  // 阴影
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.12);

  // 过渡
  --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fade: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-transform: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  // 断点
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1920px;

  // 兼容别名 (为了向后兼容，后续可以逐步替换掉)
  --border-radius-base: var(--radius-base);
  --border-radius-medium: var(--radius-medium);
  --border-radius-large: var(--radius-large);
  --border-radius-extra-large: var(--radius-round);

  --box-shadow-base: var(--shadow-base);
  --box-shadow-light: var(--shadow-light);
  --box-shadow-dark: var(--shadow-dark);

  --font-size-extra-large: var(--font-size-h1);
  --font-size-large: var(--font-size-h2);
  --font-size-medium-large: var(--font-size-h3);
  --font-size-medium: var(--font-size-h4);
  --font-size-base: var(--font-size-body);
  --font-size-extra-small: var(--font-size-small);

  // 为了兼容旧的 mixins
  --primary-color: var(--color-primary);
  --primary-color-dark: #4070d4; // 悬浮加深
  --success-color: var(--color-success);
  --warning-color: var(--color-warning);
  --danger-color: var(--color-danger);
  --info-color: var(--color-info);

  // 其他兼容别名
  --font-size-title: var(--font-size-h1); // 页面标题
  --font-size-subtitle: var(--font-size-h2); // 主标题
  --font-size-heading: var(--font-size-h3); // 次级标题
  --font-size-subheading: var(--font-size-h4); // 小标题
  --font-size-caption: var(--font-size-small); // 说明文字
  --font-size-auxiliary: var(--font-size-small); // 辅助文字

  // 行高兼容
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-loose: 1.8;

  // 容器宽度 (保持原有的响应式设计)
  --container-width: 84%;
  --container-max-width: 90%;
  --container-padding: 40px;
  --container-padding-md: 24px;
  --container-padding-sm: 16px;

  // 动画时间 (保持原有的响应式设计)
  --transition-fast: 0.2s;
  --transition-slow: 0.4s;

  // 移动端文字大小 (保持原有的响应式设计)
  --font-size-mobile-h1: 2rem;
  --font-size-mobile-h2: 1.5rem;
  --font-size-mobile-body: 0.9rem;

  // 移动端间距 (保持原有的响应式设计)
  --spacing-mobile-section: 32px;
  --spacing-mobile-element: 16px;

  // 导航菜单 (保持原有的响应式设计)
  --nav-item-gap: 32px;
  --nav-font-size: 15px;
  --nav-icon-size: 16px;
  --nav-icon-opacity: 0.8;
  --nav-icon-scale: 1.1;

  --bg-color-soft: var(--color-white);
  --bg-color-light: var(--color-gray-50);
  --bg-color-mute: var(--color-gray-100);

  --border-color: var(--color-gray-200);
  --border-color-light: var(--color-gray-100);

  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-large: 0 12px 24px rgba(0, 0, 0, 0.12);
}

// 暗色主题
html.dark {
  // 主题色 (暗色模式下保持相同的主题色)
  --color-primary: #518aff;
  --color-success: #5ad8a6;
  --color-warning: #ffad08;
  --color-danger: #ff5858;
  --color-info: #909399;

  // 文字颜色 (暗色模式)
  --text-primary: #e5eaf3;
  --text-regular: #a3a6ad;
  --text-secondary: #909399;
  --text-placeholder: #606266;
  --text-disabled: #606266;

  // 边框颜色 (暗色模式)
  --border-base: #363637;
  --border-light: #4c4d4f;
  --border-lighter: #2c2c2c;
  --border-extra-light: #1a1a1a;

  // 背景色 (暗色模式)
  --bg-base: #1a1a1a;
  --bg-light: #242424;
  --bg-hover: #2c2c2c;
  --bg-disabled: #2c2c2c;

  // 暗色模式阴影
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.5);

  // 兼容别名 (暗色模式)
  --primary-color: var(--color-primary);
  --primary-color-dark: #4070d4; // 悬浮加深
  --success-color: var(--color-success);
  --warning-color: var(--color-warning);
  --danger-color: var(--color-danger);
  --info-color: var(--color-info);

  // 导航菜单暗色模式
  --nav-bg: var(--bg-light);
  --nav-border: var(--border-base);

  --bg-color-soft: var(--color-gray-800);
  --bg-color-light: var(--color-gray-900);
  --bg-color-mute: var(--color-gray-700);

  --border-color: var(--color-gray-700);
  --border-color-light: var(--color-gray-800);
}

// 响应式断点调整 (保持原有的响应式设计)
@media screen and (max-width: 1400px) {
  :root {
    --container-width: 88%;
    --container-max-width: 92%;
    --container-padding: 32px;
  }
}

@media screen and (max-width: 1200px) {
  :root {
    --container-width: 92%;
    --container-max-width: 94%;
    --container-padding: 24px;
  }
}

@media screen and (max-width: 992px) {
  :root {
    --container-width: 94%;
    --container-max-width: 96%;
    --container-padding: 20px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --container-width: 96%;
    --container-max-width: 98%;
    --container-padding: 16px;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --container-width: 100%;
    --container-max-width: 100%;
    --container-padding: 12px;
  }
}
